<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src=".././static/js/public-head.js"></script>
</head>
<body >
<form class="layui-form " action="" lay-filter="xd-table-col-form" action="javascript:;">
    <input type="hidden" name="id"  value="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">字段名</label>
            <div class="layui-input-inline">
                <input type="text" name="field" placeholder="与获取字段一致,区分大小写"   autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">别名</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <select name="type" lay-verify="required">
                    <option value="normal">默认</option>
                    <option value="numbers">序号列</option>
                    <option value="space">空列</option>
                    <option value="radio">单选框</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">固定位置</label>
            <div class="layui-input-inline">
                <select name="fixed"  title="固定列位置需放在Table首或尾">
                    <option value=""></option>
                    <option value="left">左</option>
                    <option value="right">右</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">宽度</label>
            <div class="layui-input-inline">
                <input type="text" name="width"  placeholder="支持数字、百分比"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">最小宽度</label>
            <div class="layui-input-inline">
                <input type="text" name="minWidth"  placeholder="列自适应最小宽度" lay-verify="number"  value="120" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所占行数</label>
            <div class="layui-input-inline">
                <input type="text" name="rowspan" lay-verify="number"   autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所占列数</label>
            <div class="layui-inline">
                <div class="layui-input-inline"  onclick="commonUtil.openPage('所占列数','editTextArea.html?1=1&colspan','60%','60%')" >
                    <textarea name="colspan" id="colspan" style="min-height:38px;height:36px;" placeholder="支持数字、SQL:select count(1) " readonly lay-verify="required" class="layui-input"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开启合计</label>
            <div class="layui-input-inline">
                <select name="totalRow" lay-filter="totalRow">
                    <option value="false" selected>否</option>
                    <option value="true">是</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">合计文本</label>
            <div class="layui-input-inline">
                <input type="text" name="totalRowText"    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">数据位置</label>
            <div class="layui-input-inline">
                <select name="align" lay-verify="required">
                    <option value="left" >居左</option>
                    <option value="center" selected>居中</option>
                    <option value="right">居右</option>
                </select>
            </div>
        </div>
        <div class="layui-inline" id="xdtable-mergeFlag-item">
            <label class="layui-form-label">开启合并</label>
            <div class="layui-input-inline">
                <select name="mergeFlag" lay-filter="mergeFlag">
                    <option value="false" selected>否</option>
                    <option value="true">是</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">影藏该列</label>
            <div class="layui-input-inline">
                <select name="hide" lay-filter="hide">
                    <option value="false" selected>否</option>
                    <option value="true">是</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开启排序</label>
            <div class="layui-input-inline">
                <select name="sort" lay-filter="sort">
                    <option value="false" selected>否</option>
                    <option value="true">是</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">自定义</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline"  onclick="commonUtil.openPage('自定义','editTextArea.html?1=1&templet','60%','60%')" >
                    <textarea name="templet" id="templet" style="min-height:38px;height:36px;" placeholder="支持HTML如:<a>{{d.field}}</a>" readonly class="layui-input"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">自定义CSS</label>
            <div class="layui-input-inline">
                <input type="text" name="style"  placeholder="示例： color: #fff;"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">高级属性</h2>
            <div class="layui-colla-content" style="padding-left: 0px">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">数据类型</label>
                        <div class="layui-input-inline">
                            <select name="dataType" lay-filter="dataType">
                                <option value="String" selected>字符串</option>
                                <option value="Number">数字</option>
                                <option value="Date">日期</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" >
                        <label class="layui-form-label">绑定值来源</label>
                        <div class="layui-input-inline">
                            <select name="paramId"   xm-select="paramId" xm-select-radio=""  xm-select-height="36px" xm-select-search="" >
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" id="primaryKey-dom">
                        <label class="layui-form-label">主键类型</label>
                        <div class="layui-input-inline">
                            <select name="primaryKey" lay-filter="primaryKey">
                                <option value="" selected></option>
                                <option value="Auto">自增主键</option>
                                <option value="Ora-seq">Oracle序列</option>
                            </select>
                        </div>
                        <div class="layui-form-mid layui-word-aux">insert使用</div>
                    </div>
                    <div class="layui-inline" >
                        <label class="layui-form-label">逻辑主键</label>
                        <div class="layui-input-inline">
                            <select name="combKey" lay-filter="combKey"  lay-verify="required">
                                <option value="false" selected>否</option>
                                <option value="true">是</option>
                            </select>
                        </div>
                        <div class="layui-form-mid layui-word-aux">delete、update使用</div>
                    </div>
                </div>
                <hr>
                <ul class="layui-timeline">
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h4 class="layui-timeline-title">主键说明</h4>
                            <p>1.主键类型</p>
                            <ul>
                                <li>主要用在新增、导入操作上</li>
                                <li>Oracle序列需要配置具体sequence</li>
                            </ul>
                            <p>2.逻辑主键</p>
                            <ul>
                                <li>主要用在删除、更新操作上</li>
                                <li>逻辑主键可配置多个,删除、更新会根据逻辑主键操作</li>
                            </ul>
                            <p>3.批量导入</p>
                            <ul>
                                <li>如果配置有逻辑主键，则先删除后新增，否则不删除</li>
                                <li>配置有逻辑主键，导入后物理主键会更新(自增主键,先删后插的原因，序列会变更)</li>
                                <li>通常情况，批量导入如果不想变更ID，则无需设置主键类型，只用设置逻辑主键，导入完成后，修改会正常主键类型即可</li>
                            </ul>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h4 class="layui-timeline-title">自定义说明</h4>
                            <p>主要用于配置二阶报表</p>
                            <ul>
                                <li>
                                     <pre class="layui-code" lay-title="" lay-height="" lay-skin="" lay-encode="">方式一(新窗口)： &lt;div&gt;&lt;a  href="../xdWidget/report.gsp?rptId=27&panelId={{d.id}}"  target="_blank" class="layui-table-link" &gt;二阶&lt;/a&gt;&lt;div&gt;
                                        <br>方式二(嵌入弹窗)：&lt;div&gt;&lt;a href="javascript:commonUtil.openPage('二阶Report','../xdWidget/report.gsp?rptId=27&panelId={{d.id}}')" class="layui-table-link" &gt;二阶&lt;/a&gt;&lt;div&gt;
                                     </pre>
                                    {{d.field}} 为查询单条记录字段值
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-layout-admin">
        <div class="layui-input-block">
            <div class="layui-footer" style="left: 0;">
                <button class="layui-btn" lay-submit="" lay-filter="xd-table-col-form-bt">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</form>
</body>
<script type="text/javascript">
    layui.config({
        base: basePath+'/layui/lay/modules/'
    }).extend({
        formSelects: 'formSelects-v4'
    }).use([ 'form','formSelects','element','code' ], function() {
        var $ = layui.$
        var layer = layui.layer
        var form = layui.form
        var formSelects = layui.formSelects;
        var element = layui.element;
        var code = layui.code
        $.getJSON(basePath+"/xdTableColCfg/getOne"+urlParam,function(rst){
            if(rst.code != 0){
                layer.msg(rst.msg)
            }else{
                form.val("xd-table-col-form",rst.data)
                var mergeFlag = rst.data.mergeFlag
                var mergeRefField = rst.data.mergeRefField
                initFieldSelect(formSelects,mergeFlag,mergeRefField)
                initPrimaryValue(rst.data.primaryKey,rst.data.primaryValue)
                initParamId(formSelects,rst.data.paramId)
            }
        })
        form.on("submit(xd-table-col-form-bt)",function(obj){
            $.post(basePath+"/xdTableColCfg/update",obj.field,function(rst){
                if(rst.code !=0 ){
                    layer.alert(rst.msg)
                }else{
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    parent.widgetUtil.initTableCols(rst.data)
                }
            },"json")
            return false
        })
        form.on('select(mergeFlag)', function(data){
            var mergeFlag = data.value
            initFieldSelect(formSelects,mergeFlag,null)
        });
        form.on("select(primaryKey)",function(data){
            var value  = data.value
            initPrimaryValue(value,"")
        })
    });
    function initFieldSelect(formSelects,mergeFlag,value){
        if(mergeFlag == "true"){
            if($("#xdtable-mergeField-item").length == 0 ){
                $("#xdtable-mergeFlag-item").after($("#xdtable-mergeField-item-dom").html())
                formSelects.data("mergeRefField","server",{
                    url:basePath+"/xdTableColCfg/getFieldSelect"+urlParam,
                    success: function (id, url, searchVal, result) {
                        formSelects.value("mergeRefField",[value])
                    }
                })
            }
        }else{
            $("#xdtable-mergeField-item").remove()
        }
    }
    function initPrimaryValue(primaryKey,primaryValue){
        if(primaryKey == "Ora-seq"){
            if($(".layui-form #primaryValue-dom").length == 0 ){
                $("#primaryKey-dom").after($("#xdtable-primaryValue-item-dom").html())
                $("input[name=primaryValue]").val(primaryValue)
            }
        }else{
            $("#primaryValue-dom").remove()
        }
    }
    function initParamId(formSelects,value){
        formSelects.config("paramId",{//远程根据 keyword 查询
            data:{id:value},
            searchUrl:basePath+"/xdWidgetSelect/query",
            success: function(id, url, searchVal, result){ }
        });
    }
</script>
<script type="text/html" id="xdtable-mergeField-item-dom">
    <div class="layui-inline" id="xdtable-mergeField-item">
        <label class="layui-form-label">参照列</label>
        <div class="layui-input-inline">
            <select xm-select="mergeRefField" xm-select-radio=""  xm-select-height="36px" xm-select-search="" name="mergeRefField" id="mergeRefField" >
            </select>
        </div>
    </div>
</script>
<script type="text/html" id="xdtable-primaryValue-item-dom">
    <div class="layui-inline" id="primaryValue-dom">
        <label class="layui-form-label">主键值</label>
        <div class="layui-input-inline">
            <input type="text" name="primaryValue"  lay-verify="required"   placeholder="示例:seq_name.nextval"  autocomplete="off" class="layui-input">
        </div>
    </div>
</script>